body{
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-content: center;
}

article{
    width: 400px;
    height: 400px;
    border:solid 1px #000;
    overflow: hidden;
    section{
        transition: 1s;
        display: grid;
        grid-template-rows: repeat(2,400px);
        .title{
            display: grid;
            grid-template-rows: repeat(2,1fr);
            h3 ,p{
                display: flex;
                justify-content: center;
                align-items: center;
            }
            h3{
                background-color: cadetblue;
            }
            p{
                background-color: coral;
            }
        }
        &:hover{
            // transition: 1s;
            transform: translateY(-400px);
        }
    }
}